<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

	<h:head>
			<title>Cadsatro de Visitante</title>
			
	</h:head>
	
	<h:body>
	
		<ui:composition template="/layout/commonLayout.xhtml">
			<ui:define name="centro">
	
				<h:form>
				                 
				    <p:growl id="growl" sticky="true" showDetail="true"/>
				 
				 
				 	<!-- ############ PESSOAL ############ -->
				
					<p:wizard flowListener="#{userWizard.onFlowProcess}">
					    <p:tab id="personal" title="Pessoal">
					    
					        <p:panel header="Informações Pessoais">
					            <p:messages />
					            <h:panelGrid columns="2" columnClasses="label, value">
					            
					 			 	<h:outputLabel for="nome" value="Nome:" style="font-weight:bold"/>
									<p:inputText id="nome" value="#{userWizard.visitante.nome}" required="true" label="Nome" />
								
								
								   <h:outputLabel for="dataNascimento" value="Data Nascimento:" style="font-weight:bold"/>
								   <p:inputMask id="dataNascimento" value="#{visitanteMB.dataNascimento}" label="Data Nascimento" mask="99/99/9999" required="true"  />
								   
									<h:outputLabel for="pesoAtual" value="Peso Atual:" style="font-weight:bold"/>                    
									<p:inputText id="pesoAtual" value="#{userWizard.visitante.pesoAtual}" converterMessage="Cannot convert to double." size="3"/>
									
									<h:outputLabel for="altura" value="Altura:" style="font-weight:bold"/>                    
									<p:inputText id="altura" value="#{userWizard.visitante.altura}" converterMessage="Cannot convert to double." size="3"/>
									
									
									<h:outputLabel value="Tipo de Pele" />  
									<h:selectOneMenu id="peles" value="#{visitanteMB.tipoPele}"> 
									<f:selectItem itemLabel="Selecione" />  
										<f:selectItems value="#{visitanteMB.tipoPeles}" var="p" itemValue="#{p}" itemLabel="#{p.label}"/>  
									</h:selectOneMenu>
					
					
					              <h:outputText value="Skip to last: " />
					              <h:selectBooleanCheckbox value="#{userWizard.skip}" />
					              
					          </h:panelGrid>
					      </p:panel>
					  </p:tab>
					  
					  
					  <!-- ############ ENDEREÇO ############ -->	 
					<p:tab id="address" title="Endereço">
					    <p:panel header="Detalhes do Endereço">
					        <p:messages />
					        <h:panelGrid columns="2" columnClasses="label, value">
					            
					            
					      <h:outputLabel for="logradouro" value="Logradouro:" style="font-weight:bold"/>
					<p:inputText id="logradouro" value="#{userWizard.endereco.logradouro}" required="true" label="Logradouro" />
						            
					
					<h:outputLabel for="numeroLogradouro" value="Nº:" style="font-weight:bold"/>
					<p:inputText id="numeroLogradouro" value="#{userWizard.endereco.numeroLogradouro}" label="Nº" required="false" maxlength="5" size="4">
					   <f:validateLength maximum="5" />
					</p:inputText>
					
					
					<h:outputLabel for="numeroApartamento" value="Nº Apartamento:" style="font-weight:bold"/>                    
					<p:inputText id="numeroApartamento" value="#{userWizard.endereco.numeroApartamento}" label="Nº Apartamento" required="false" maxlength="5" size="4">
					   <f:validateLength minimum="2" maximum="3" />
					</p:inputText>
					
					
					<h:outputLabel for="bairro" value="Bairro:" style="font-weight:bold"/>                    
					<p:inputText id="bairro" value="#{userWizard.endereco.bairro}" label="Bairro" required="false" />
					
					
					<h:outputLabel for="cep" value="CEP:" style="font-weight:bold"/>                    
					<p:inputText id="cep" value="#{userWizard.endereco.cep}" label="CEP" required="false" maxlength="9" size="7" />
					
					
					<h:outputLabel for="cidade" value="Cidade" style="font-weight:bold"/>                    
					<p:inputText id="cidade" value="#{userWizard.endereco.cidade}" label="Cidade" required="true" />
					
					
					<h:outputLabel for="uf" value="UF:" style="font-weight:bold"/>                    
					      <p:inputText id="uf" value="#{userWizard.endereco.uf}" label="UF" required="true" maxlength="3" size="2">
					         <f:validateLength minimum="2" maximum="3" />
					      </p:inputText>
					              
					            
					            <h:outputText value="Skip to last: " />
					            <h:selectBooleanCheckbox value="#{userWizard.skip}" />
					        </h:panelGrid>
					    </p:panel>
					</p:tab>
					
					<!-- ############ CONTATO ############ -->
					
					<p:tab id="contact" title="Contato">
					    <p:panel header="Contact Information">
					        <p:messages />
					        <h:panelGrid columns="2" columnClasses="label, value">
					            
					        <h:outputLabel for="dddTelefonePrincipal" value="DDD:" style="font-weight:bold"/>
							<p:inputText id="dddTelefonePrincipal" value="#{userWizard.contato.dddTelefonePrincipal}" required="true" label="DDD" maxlength="3" size="2">
								<f:validateLength minimum="2" maximum="3" />
							</p:inputText>
					
					
							<h:outputLabel for="numTelefonePrincipal" value="Tel Principal:" style="font-weight:bold"/>
							<p:inputMask id="numTelefonePrincipal" value="#{userWizard.contato.numTelefonePrincipal}" label="Tel Principal" mask="9999-9999" required="true"  />
							
							
							<h:outputLabel for="dddTelefoneComercial" value="DDD:" style="font-weight:bold"/>                    
							<p:inputText id="dddTelefoneComercial" value="#{userWizard.contato.dddTelefoneComercial}" label="DDD" required="false" maxlength="3" size="2">
							   <f:validateLength minimum="2" maximum="3" />
							</p:inputText>
							
							<h:outputLabel for="numTelefoneComercial" value="Tel Comercial:" style="font-weight:bold"/>                    
							<p:inputMask id="numTelefoneComercial" value="#{userWizard.contato.numTelefoneComercial}" label="Tel Comercial" mask="9999-9999" required="false" />
							
							
							<h:outputLabel for="dddTelefoneCelular" value="DDD:" style="font-weight:bold"/>                    
							<p:inputText id="dddTelefoneCelular" value="#{userWizard.contato.dddTelefoneCelular}" label="DDD" required="false" maxlength="3" size="2">
							   <f:validateLength minimum="2" maximum="3" />
							</p:inputText>
							
							<h:outputLabel for="numTelefoneCelular" value="Tel Celular" style="font-weight:bold"/>                    
							<p:inputMask id="numTelefoneCelular" value="#{userWizard.contato.numTelefoneCelular}" label="Tel Celular" mask="99999-9999" required="false" />
							
							
							<h:outputLabel for="dddTelefoneCasa" value="DDD:" style="font-weight:bold"/>                    
							<p:inputText id="dddTelefoneCasa" value="#{userWizard.contato.dddTelefoneCasa}" label="DDD" required="false" maxlength="3" size="2">
							   <f:validateLength minimum="2" maximum="3" />
							</p:inputText>
							
							<h:outputLabel for="numTelefoneCasa" value="Tel Casa" style="font-weight:bold"/>                    
							<p:inputMask id="numTelefoneCasa" value="#{userWizard.contato.numTelefoneCasa}" label="Tel Casa" mask="9999-9999" required="false" />
					
					
							<h:outputLabel for="email" value="E-Mail" style="font-weight:bold"/>                    
						    <p:inputText id="email" value="#{userWizard.contato.email}" label="E-Mail" required="true" size="30">
					       
					    	</p:inputText>
					      	
					            
					        </h:panelGrid>
					    </p:panel>
					</p:tab>
					
					
					<!-- ############ CONFIRMAÇÃO ############ -->
					
					    <p:tab id="confirm" title="Confirmation">
					        <p:panel header="Confirmation">
					            <h:panelGrid id="confirmation" columns="3" columnClasses="grid,grid,grid">
					                <h:panelGrid columns="2" columnClasses="label, value">
					                    <h:outputText value="Nome: " />
					                    <h:outputText value="#{userWizard.visitante.nome}" styleClass="outputLabel"/>
					
					                    <h:outputText value="Data Nascimento: " />
					                    <h:outputText value="#{userWizard.visitante.dataNascimento}" styleClass="outputLabel"/>
					
					                    <h:outputText value="Altura: " />
					                    <h:outputText value="#{userWizard.visitante.altura}" styleClass="outputLabel"/>
					                </h:panelGrid>
					
					                <h:panelGrid columns="2" columnClasses="label, value">
					                    <h:outputText value="Logradouro: " />
					                    <h:outputText value="#{userWizard.endereco.logradouro}" styleClass="outputLabel"/>
					
					                    <h:outputText value="Estado: " />
					                    <h:outputText value="#{userWizard.endereco.uf}" styleClass="outputLabel"/>
					
					                    <h:outputText value="Cidade: " />
					                    <h:outputText value="#{userWizard.endereco.cidade}" styleClass="outputLabel"/>
					                </h:panelGrid>
					
					                <h:panelGrid columns="2" columnClasses="label, value">
					                    <h:outputText value="Email: " />
					                    <h:outputText value="#{userWizard.contato.email}" styleClass="outputLabel"/>
					
					                    <h:outputText value="Telefone: " />
					                    <h:outputText value="#{userWizard.contato.numTelefonePrincipal}" styleClass="outputLabel"/>
					
					                    <h:outputText />
					                    <h:outputText />
					                </h:panelGrid>
					            </h:panelGrid>
					
					            <p:commandButton value="Enviar" actionListener="#{userWizard.save}" update="growl" process="@this"/>
					        </p:panel>
					    </p:tab>
					</p:wizard>
				 
				</h:form>
		
			</ui:define>
		</ui:composition>
	
	</h:body>
</html>